<#assign pageTitle="我的账户"/>
<#assign pageHeader>
    <link rel="stylesheet" type="text/css" href="/static/h5/css/user.css?20220210"/>
    <link rel="stylesheet" href="/static/h5/css/vip.css" />
</#assign>
<#assign pageContent>
    <van-nav-bar
            title="我的账户"
            left-text="返回"
            left-arrow
            @click-left="location.href='/user/index.html';"
            fixed
            placeholder
    ></van-nav-bar>
    <div class="account-wrap">
        <div class="account-header">
            <div class="icon-money">￥</div>
            <p>账户余额</p>
            <div class="money-number"><h3>${userAccount.balance/100}</h3>元</div>
            ￥<span style="color:#ff0033;">${userAccount.vmAmount/100}</span>元来自充值
            ，￥<span style="color:#ff0033;">${userAccount.backAmount/100}</span>元来自返现。
        </div>
    </div>
    <div class="box-title">
        <div class="title-name">账户用途</div>
    </div>
    <div class="account-info">
        <p>1.账户余额可在站内购买商品。</p>
        <p>2.来自返现部分的余额可作为现金，提现到本人绑定的银行卡。</p>
    </div>
    <div class="box-title">
        <div class="title-name">提现说明</div>
    </div>
    <div class="account-info">
        <p>账户内来自返现金额可全部提现到登录账号所绑定的银行卡内。提现过程中，提现的金额会处于冻结状态，提现审核通过，将自动转入银行卡内，请注意查收。</p>
    </div>
    <div class="h-60"></div>
    <div class="view-content-footer">
        <van-button round color="linear-gradient(to right, #ff6034,#ee0a24)" @click="clickDraw()" class="btn-buy">提现</van-button>
        <van-button round color="linear-gradient(to right, #fcb338, #ff6e29)" @click="clickCash()" class="btn-buy">充值</van-button>
    </div>
    <van-popup
            v-model="drawPopup"
            close-icon-position="top-right"
            position="bottom"
            :style="{ height: '60%' }"
    >
        <h3 class="pd-12 mt-12 mb-12">
            <span class="fl">可提现金额: <span style="color: red"> ￥{{backAmount}}</span></span>
            <van-button  type="default" round size="small" @click="getAllMoney()" style="margin: -2px 0 0 12px">全部提现</van-button>
        </h3>
        <br>
        <br>
        <van-form @submit="onSubmit">
            <van-field
                    v-model="drawMoney"
                    name="drawMoney"
                    label="提现金额"
                    placeholder="请填写提现金额"
                    :rules="[{ required: true}]"
            ></van-field>
            <van-field
                    v-model="bankCardName"
                    name="bankCardName"
                    label="收款人"
                    placeholder="请填写收款人姓名"
                    :rules="[{ required: true}]"
            ></van-field>
            <van-field
                    v-model="bankCardNumber"
                    name="bankCardNumber"
                    label="银行卡号"
                    placeholder="请输入银行卡号"
                    :rules="[{ required: true}]"
            ></van-field>
            <van-field
                    v-model="bankName"
                    name="bankName"
                    label="开户银行"
                    placeholder="请输入开户银行"
                    :rules="[{ required: true}]"
            ></van-field>
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">提交</van-button>
            </div>
        </van-form>
    </van-popup>
    <van-popup
            v-model="cashPopup"
            closeable
            close-icon-position="top-right"
            position="bottom"
            :style="{ height: '550px' }"
    >
        <div class="recharge-wrap">
            <div class="title">充值金额</div>
            <van-row gutter="20">
                <van-col span="12" v-for="(item,index) in recharge" :key="index" @click="doChange(item.id, item.number)">
                    <div  :class="['money-item', item.id==rechargeId?'active':'']"><p>充￥{{item.number}}</p></div>
                </van-col>
                <van-col span="12">
                    <div class="money-item" @click="selectCustom">
                        <p v-if="customMoney" >自定义金额</p>
                        <div class="custom-input" v-else>
                            <div>请输入金额</div>
                            <span>￥</span>
                            <input type="number" v-model="rechargeMoney">
                        </div>
                    </div>
                </van-col>
            </van-row>
        </div>
        <div class="recharge-btn">
            <van-button type="primary" size="large"  round color="linear-gradient(to right, #ff6034, #ee0a24)" @click="rechargeConfirm">确认支付</van-button>
        </div>
    </van-popup>
</#assign>
<script type="text/javascript" src="/static/libs/jquery/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="/static/libs/layer/layer.js"></script>
<script type="text/javascript" src="/static/js/wxJSAPI.js"></script>
<script type="text/javascript" src="/static/h5/js/order-h5.js"></script>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<#assign pageScript>
    <script>
        var backAmount = ${userAccount.backAmount/100}
        new Vue({
            el: '#app',
            data() {
                return {
                    showFooter: false,
                    show: false,
                    drawPopup: false,
                    cashPopup: false,
                    activeTab:0,
                    backAmount:backAmount,
                    drawMoney:"",
                    bankCardName:"",
                    bankCardNumber:"",
                    bankName:"",
                    payCash:0,
                    value: '',
                    active:0,
                    price:0,
                    recharge:[
                        {id:1,number: 50},
                        {id:2,number: 100},
                        {id:3,number: 200},
                        {id:4,number: 500}
                    ],
                    rechargeMoney:50,
                    rechargeId:1,
                    customMoney: true
                }
            },
            methods: {
                clickDraw(){
                    this.drawPopup = true;
                },
                clickCash(){
                    this.cashPopup = true;
                },
                getAllMoney(){
                    var money = this.backAmount-(this.backAmount%100);
                    if(money < 100){
                        this.$dialog.alert({
                            title:"提现金额必须是100的倍数，最低提现100元"
                        });
                        return false;
                    }
                    this.drawMoney = money
                },
                onSubmit(values) {
                    console.log('submit', values);
                    var that = this;
                    var data = new FormData();
                    data.append("drawMoney", that.drawMoney)
                    data.append("bankCardName", that.bankCardName)
                    data.append("bankCardNumber", that.bankCardNumber)
                    data.append("bankName", that.bankName)
                    axios.post('/user/account/draw.json',data).then(function (json) {
                        if (json.data.code === 0) {
                            that.$dialog.alert({
                                title:"恭喜你，您的提现申请信息提交成功！"
                            });
                        } else {
                            that.$dialog.alert({
                                title:json.data.msg
                            });
                        }
                    });

                },
                onSubmitCash(values) {
                    console.log('submit', values);
                    var that = this;
                    var data = new FormData();
                    data.append("drawMoney", that.drawMoney)
                    data.append("bankCardName", that.bankCardName)
                    data.append("bankCardNumber", that.bankCardNumber)
                    data.append("bankName", that.bankName)
                    axios.post('/user/account/draw.json',data).then(function (json) {
                        if (json.data.code === 0) {
                            that.$dialog.alert({
                                title:"恭喜你，您的提现申请信息提交成功！"
                            });
                        } else {
                            that.$dialog.alert({
                                title:json.data.msg
                            });
                        }
                    });

                },
                doChange(id,number){
                    this.customMoney = true;
                    this.rechargeId = id;
                    this.rechargeMoney = number;
                },
                selectCustom(){
                    this.rechargeId = 0;
                    this.rechargeMoney = "";
                    this.customMoney = false
                },
                rechargeConfirm(){
                    var that = this;
                    var money = that.rechargeMoney;
                    if(money == '' || money < 5){
                        that.$dialog.alert({
                            title:"充值金额必选大于5元起充"
                        });
                        return false;
                    }
                    var data = new FormData();
                    data.append("otherId", money);
                    data.append("orderType", "ACCOUNT");
                    data.append("payType", "WXPAY");
                    orderCreate(data);
                }
            }
        });
    </script>
</#assign>
<#include "../layout_h5.ftl" />